<template>
  <f-view :title="'点单'">
    <view class="flex-center bar">
      <view class="top-item" :class="topSelIdx===0?'top-item-sel':''" @click="choseIdx(0)">全部</view>
      <view class="top-item" :class="topSelIdx===1?'top-item-sel':''" @click="choseIdx(1)">堂食</view>
      <view class="top-item" :class="topSelIdx===2?'top-item-sel':''" @click="choseIdx(2)">跑腿</view>
      <view class="top-item" :class="topSelIdx===3?'top-item-sel':''" @click="choseIdx(3)">自取</view>
      <view class="top-item" :class="topSelIdx===4?'top-item-sel':''" @click="choseIdx(4)">快递</view>
    </view>
		<view class="table-view">
			<view class="cell mb20" v-for="(item,idx) in dataList" :key="item.id">
				<view class="flex-start-between">
					<view class="flex-center">
						<view class="tag mr10">快递</view>
						<view>无手作面包</view>
					</view>
					<view>
						<view class="txt-right mb10" @click="gotoDetail">
							<text class="not-shring">已取消</text>
							<text class="iconfont">&#xe60e;</text>
						</view>
						<view class="font12 gray">{{item.createTime}}</view>
					</view>
				</view>
				<view class="flex-center-between">
					<image class="good-img" mode="scaleToFill" :src="'https://e3f49eaa46b57.cdn.sohucs.com/2025/4/23/23/58/MTAwMTIyXzE3NDU0MjM5MzE1ODI=.jpg'"/>
					<view>
						<view class="bolder">
							<text class="font13">￥</text>
							<text class="font15">{{item.amount||0}}</text>
						</view>
						<view class="font12 gray txt-right">共1件</view>
					</view>
				</view>
			</view>
		</view>
  </f-view>
</template>

<script>
import FView from "@/pages/components/f-view.vue";
import {getStore} from "@/config/util";
import {getOrderList} from "@/api";
export default {
  name: "order",
  components:{FView},
  data () {
    return {
      topSelIdx:0,
			userInfo:{},
			dataList:[],
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
		this.userInfo = getStore('userInfo',1)||{};
		this.getData();
  },
  methods: {
    choseIdx(idx){
      this.topSelIdx = idx;
    },
		getData(){
			let dic = {customerId:this.userInfo.id,state:1}
			getOrderList(dic).then(res=>{
				this.dataList = res.data?(res.data.records||[]):[]
			});
		},
    gotoDetail(){
      uni.navigateTo({
        url: '/pages/order/detail'
      });
    }
  }
}
</script>

<style lang="scss" scoped>
	.not-shring{
		flex-shrink: 0;
	}
	.txt-right{
		text-align: right;
	}
  .top-item ,.top-item-sel{
    flex:1;
    color:#5E5E5E;
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
    border-radius: 30rpx;
    text-align: center;
  }
  .top-item-sel{
    background-color: #DEE082;
    color:white;
  }
  .bar{
    padding: 15rpx 20rpx;
  }
	.table-view{
		padding:0 20rpx 20rpx 20rpx;
	}
	.cell{
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		.tag{
			padding: 3rpx 5rpx;
			border-radius: 5rpx;
			font-size: 20rpx;
			border:1rpx solid #DEE082;
			color: #DEE082;
		}
		.good-img {
			width: 230rpx;
			height: 230rpx;
			border-radius: 15rpx;
			flex-shrink: 0;
		}
	}
</style>